<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/myQuery.js"></script>
    <!-- <script src="../js/jquery-1.10.1.min.js"></script> -->
    <style>
        li {
            line-height: 40px;
            border: 1px dashed #333;
        }

        .button-groups {
            margin-top: 10px;
        }

        .active {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">模拟封装jqeury</h2>
        <ul class="list">
            <li class="first active">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>

    <div class="button-groups">
        <button class="html">html</button>
        <button class="hide">hide</button>
        <button class="show">show</button>
        <button class="click">click</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="hasClass">hasClass</button>
        <button class="setWidth">设置宽度</button>
        <button class="getWidth">获取宽度</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>


    $(".html").click(function () {
        $(".list li").html("hello");
    })

    $(".hide").click(function () {
        $(".list li").hide();
    })

    $(".show").click(function () {
        $(".list li").show();
    })

    $(".click").click(function () {
        $(".list li").click(function () {
            console.log(this);
        });
    })

    $(".addClass").click(function () {
        $(".list li").addClass("one two three");
    })

    $(".removeClass").click(function () {
        $(".list li").removeClass("one three");
    })

    $(".hasClass").click(function () {
        console.log($(".list li").hasClass("two"));;
    })

    $(".setWidth").click(function () {
        // $(".list li").width("200px");
        $(".list li").width(200);
    })

    $(".getWidth").click(function () {
        console.log($(".list li").width());
    })

    $(".attr").click(function () {
        $(".list li").attr("class", "one two three");
        $(".list li").attr("title", "hello");
        $(".list li").attr("asd", "asd");
        $(".list li").attr("data-index", "1111");

        console.log($(".list li").attr("class"));
        console.log($(".list li").attr("title"));
        console.log($(".list li").attr("asd"));
        console.log($(".list li").attr("data-index"));
    })

    $(".prop").click(function () {
        // $(".list li").prop("id", "aaaa");
        // $(".list li").prop("className", "one two three");
        // $(".list li").prop("title", "hello world");
        // $(".list li").prop("tagName", "hello");
        // $(".list li").prop("style", "width:100px");

        console.log($(".list li").prop("id"));
        console.log($(".list li").prop("className"));
        console.log($(".list li").prop("tagName"));
        console.log($(".list li").prop("innerHTML"));
        console.log($(".list li").prop("innerText"));
        console.log($(".list li").prop("clientWidth"));
        console.log($(".list li").prop("offsetLeft"));
    })


    $(".css").click(function () {
        // $(".list li").css("background", "red");
        // $(".list li").css("width", "200px");
        // $(".list li").css("height", "200px");
        // $(".list li").css("text-align", "center");
        // $(".list li").css("line-height", "200px");

        $(".list li").css({
            background: "red",
            width: "200px",
            height: "200px",
            textAlign: "center",
            lineHeight: "200px"
        })

        console.log($(".list li").css("background"));
        console.log($(".list li").css("width"));
        console.log($(".list li").css("height"));
        console.log($(".list li").css("text-align"));
        console.log($(".list li").css("line-height"));
    })


    $(".eq").click(function () {
        $(".list li").eq(0).css({ background: "red" })
    })
    $(".siblings").click(function () {
        // $(".first").siblings().css({ background: "red" })
        $(".first,.last").siblings().css({ background: "red" })
    })


    $(".chain").click(function () {
        $(".list li").eq(0).html(123123).width(200).css({ background: "red" }).click(function () {
            alert($(this).index());
        }).siblings().html(456456).width(400).css({ background: "blue" }).click(function () {
            alert($(this).index());
        })
    })



    $(".list li").click(function () {
        // console.log(this);
        // console.log(this.innerHTML);

        // this=> 原生DOM元素 => 只能使用原生的属性和方法 =>  无法使用GetEle.prototype上的方法 !!!!
        // this.html();   //  html is not defined

        // 如果想使用GetEle.prototype上的方法 => 想方法将原生dom元素转化为对应的实例化对象
        // debugger;
        // $(this).css({
        //     background: "red"
        // }).siblings().css({
        //     background: "none"
        // })

        $(this).addClass("active").siblings().removeClass("active");
    })

    $(".list li").each(function () {
        console.log(this);
    })











</script>

</html>